<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <style>
        .container {
          width: 800px;
          height: 400px;
        }
      </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="./echarts.min.js"></script>
<script type="text/javascript" >
      const myEcharts = echarts.init(document.querySelector(".container"));
    const option = {
        xAxis:{
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

        },
        yAxis:{},
        series:[
            {
                type:'bar',
                data:[1,2,3,4,5,6,7,8,9,10,11,12]
            },
            {
                type:'line',
                data:[30,12,45,6,21,45,21,45,12,45,12,45]
            },
            {
                type:'pie',
                data: [
              {
                name: "xx",
                value: 10,
              },
              {
                name: "yy",
                value: 20,
              },
              {
                name: "zz",
                value: 30,
              },
              
            ],
            radius: ["0", "20%"], // 半径
            center: ["70%", "12%"], // 圆心点坐标
            }
        ]
    }
    myEcharts.setOption(option)
</script>
  </body>
</html>
